<template>
  <div>
    <div class="login-wrap" v-show="showLogin">
      <h3>登录</h3>
      <p v-show="showValidate">{{ validate }}</p>
      <input v-model="username" type="text" placeholder="请输入用户名">
      <input v-model="password" type="password" placeholder="请输入密码">
      <button @click="login">登录</button>
      <span @click="ToRegister">没有账号？马上注册</span>

    </div>

    <div class="register-wrap" v-show="showRegister">
      <h3>注册</h3>
      <p v-show="showValidate">{{ validate }}</p>
      <input v-model="newUsername" type="text" placeholder="请输入用户名">
      <input v-model="newPassword" type="password" placeholder="请输入密码">
      <button @click="register">注册</button>
      <span @click="ToLogin">已有账号？马上登录</span>

    </div>
  </div>
</template>

<style>
  .login-wrap {
    text-align: center;
  }

  input {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    margin-bottom: 10px;
    outline: none;
    border: 1px solid #888;
    padding: 10px;
    box-sizing: border-box;
  }

  p {
    color: red;
  }

  button {
    display: block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin: 0 auto;
    border: none;
    background-color: #41b883;
    color: #fff;
    font-size: 16px;
    margin-bottom: 5px;
  }

  span {
    cursor: pointer;
  }

  span:hover {
    color: #41b883;
  }

</style>

<script>
  import {getCookie} from "../../assets/js/cookie";

  export default {
    data() {
      return {
        showLogin: true,
        showRegister: false,
        showValidate: false,
        validate: '',
        username: '',
        password: '',
        newUsername: '',
        newPassword: ''
      }
    },
    mounted() {
      /*页面挂载获取cookie，如果存在username的cookie，则跳转到主页，无需登陆*/
      if (getCookie('username')) {
        this.$router.push('/home')
      }
    },
    methods: {
      login() {
        if (this.username == '' || this.password == '') {
          alert('请输入用户名或密码')
        } else {
          let data = {
            username: this.username,
            password: this.password
          }
          /*接口请求*/
          this.$http.post('http:localhost/vueapi/index.php/Home/user/login', data).then((res)=>{

          })
        }
      }
    }
  }
</script>
